<template>
	<view class="goods" :style="goodstyle">
		<view :class="calssName" v-if="commodityList">
			<view v-for="(item, i) in commodityList" v-if="i < mydata.params.limit" class="good-box"
			 :style="mydata.params.list_type == 'list' ? itemstyle : ''" :key="i">
				<view class="good-box-item" :style="itemstyle" @click.stop="todetial(item)">
					<view class="vimage-box">
						<view class="good-vimage-box">
							<vimage v-if="item.master" mode="widthFix" lazy-load="" :src="item.master" alt="" class="good-vimage" draggable="false" />
							<vimage v-else src="@/assets/images/goods_col2.png" alt="" class="good-vimage" draggable="false" />
						</view>
						<text class="title u-line-1" v-if="mydata.params.list_type != 'list'" :style="'color:' + mydata.params.t_color">{{ item.goods_name }}</text>
					</view>
					<view v-if="mydata.params.list_type != 'list'" class="box-bottom">
						<view class="price">
							<text v-if="mydata.params.pro_price.show" class="pro-price" :style="'color:' + mydata.params.pro_price.color">
								￥
								<text class="txt">{{ item.has_sku ? item.min_price : item.sell_price }}</text>
							</text>
							<view class="vip-price" v-if="item.now_level_price > 0">
								<text class="vip-name">会员价</text>
								<text>{{ item.now_level_price }}</text>
							</view>
							<text v-if="mydata.params.del_price.show" class="del-price" :style="'color:' + mydata.params.del_price.color">
								<text class="del-icon">{{ mydata.params.del_price.title ? mydata.params.del_price.title + ':' : '' }}</text>
								<text class="del-num">￥{{ item.original_price }}</text>
							</text>
						</view>
						<view class="btn">
							<text @click.stop="gotrolley(item)" v-show="mydata.params.add_button.show" class="buybtn-icon buybtn iconfont-m- icon-m-buy1">
								<text :style="'font-size:40rpx;color:' + mydata.params.add_button.color + ';'" :class="mydata.params.add_button.icon + ' iconfont'"></text>
							</text>
							<text v-if="mydata.params.sales_num.show" class="sales-num" :style="'color:' + mydata.params.sales_num.color">
								{{ mydata.params.sales_num.title || '销量' }}:{{ item.sell }}
							</text>
						</view>
					</view>
					<view v-if="mydata.params.list_type == 'list'" class="right van-hairline--bottom">
						<view>
							<text class="title" :style="'color:' + mydata.params.t_color">{{ item.name }}</text>
							<text class="subtitle">{{ item.subtitle }}</text>
						</view>
						<view class="right-bottom">
							<view class="price">
								<text v-if="mydata.params.pro_price.show" class="pro-price" :style="'color:' + mydata.params.pro_price.color">
									￥
									<text class="txt">{{ item.sell_price }}</text>
								</text>
								<view class="vip-price" v-if="item.now_level_price > 0">
									<text class="vip-name">会员价</text>
									<text>{{ item.now_level_price }}</text>
								</view>
								<text v-if="mydata.params.del_price.show" class="del-price" :style="'color:' + mydata.params.del_price.color">
									<text class="del-icon">{{ mydata.params.del_price.title ? mydata.params.del_price.title + ':' : '' }}</text>
									<text class="del-num">￥{{ item.original_price }}</text>
								</text>
							</view>
							<view class="btn">
								<text @click.stop="gotrolley(item)" v-show="mydata.params.add_button.show" class="buybtn-icon buybtn iconfont-m- icon-m-buy1">
									<text :style="'font-size:40rpx;color:' + mydata.params.add_button.color + ';'" :class="mydata.params.add_button.icon + ' iconfont'"></text>
								</text>
								<text v-if="mydata.params.sales_num.show" class="sales-num" :style="'color:' + mydata.params.sales_num.color">
									{{ mydata.params.sales_num.title || '销量' }}:{{ item.sell }}
								</text>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="u-flex u-row-center" style="width: 100%;">
				<u-loadmore  :marginTop='20' :status="status" :icon-type="iconType" :load-text="loadText" />
				
			</view>
		</view>
	</view>
</template>

<script>
import {mapState} from 'vuex';
import util from '@/common/util.js';
export default {
	name: 'shangpinzu',
	data() {
		return {
			commodityList: [],
			page: 1,
			size: 10,
			status: 'loadmore',
			iconType: 'flower',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '实在没有了'
			}
		};
	},
	props: {
		mydata: {
			type: Object,
			default: null
		},
		load:{
			type: Boolean,
			default: false
		}
	},
	watch: {
		isTouchPage() {
			if (this.isTouchPage != 'Reset') {
				this.status = 'loading';
				this.getShopData();
			}
		},
		load(){
			if (this.load) {
				this.status = 'loading';
				this.getShopData();
			}
		}
	},
	created() {
		
	},
	computed: {
		...mapState({
			isTouchPage: state => state.isTouchPage
		}),
		calssName() {
			// let class=''
			return 'goods-list ' + this.mydata.params.show_type + ' ' + this.mydata.params.list_type;
		},
		itemstyle() {
			return (
				'background:' +
				this.mydata.params.bg +
				';border-radius:' +
				this.mydata.params.r_t +
				'rpx ' +
				this.mydata.params.r_t +
				'rpx ' +
				this.mydata.params.r_b +
				'rpx ' +
				this.mydata.params.r_b +
				'rpx '
			);
		},
		goodstyle() {
			return 'padding: ' + this.mydata.params.p_t + 'rpx ' + this.mydata.params.p_lr + 'rpx ' + this.mydata.params.p_b + 'rpx';
		}
	},
	created() {
		// this.getShopData()
	},
	methods: {
		gotrolley(item) {

			let data = {
				show: true,
				id: item.id,
				type: item.p_type
			};
			this.$store.commit('settrolley', data);
		},
		todetial(item) {
			this.Jumpurl({
				type: 2,
				id: item.id
			});
		},
		// 获取商品
		getShopData(resetUp) {
			if(resetUp){
				this.page=1;
				this.commodityList=[]
			}
			let data = {
				page: this.page,
				size: this.size
			};
			
			this.$http('/renovation/getRecommendGoods', data, 'get').then(res => {
				let data = res.data.msg;
				let list = data.data;
				list.forEach(item => {
					if (item.level_price) {
						item.now_level_price = util.getprice(item);
					} else {
						item.now_level_price = util.getminprice(item.sku);
						item.now_level_price =item.now_level_price;
					}
					this.commodityList.push(item);
				});
			
				this.$store.commit('settouch', 'Reset');
				if(this.page==1&&list.length == 0){
					this.$emit('loadsucess',1)
				}else{
					this.$emit('loadsucess',list.length)
				}
				
				if (list.length == 0) {
					this.status = 'nomore';
					this.$emit('showNoMore')
				} else {
					this.page++
					this.status = 'loadmore';
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.goods {
	width: 100%;
	overflow: auto;
	padding: 16rpx 24rpx 0;

	// text {
	// 	font-style: normal;
	// }

	.goods-list {
		display: flex;
		flex-wrap: wrap;
		overflow: auto;
		min-width: 100%;
		box-sizing: border-box;
		padding-left: 0;

		.good-box {
			flex-shrink: 0;
			overflow: hidden;

			.good-box-item {
				overflow: hidden;
			}

			.vimage-box {
				overflow: hidden;
				position: relative;

				.good-vimage-box {
					position: relative;
					overflow: hidden;

					.good-vimage {
						width: 100%;
						display: block;
					}
				}
			}

			.title {
				display: block;
				padding: 0 16rpx;
				margin: 16rpx 0 8rpx;
				// width: 100%;
				// box-sizing: border-box;
				// color: #212121;
				// font-family: PingFang SC;
				// font-style: normal;
				// font-weight: normal;
				// font-size: 28rpx;
				// line-height: 40rpx;
				// max-height: 80rpx;
			
				
			}

			.box-bottom {
				width: 100%;
				display: flex;
				box-sizing: border-box;
			}

			.btn {
				display: flex;
				flex-direction: column;
				margin: 0;

				.buybtn {
					font-size: 48rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: right;
				}

				.sales-num {
					height: 28rpx;
					font-size: 20rpx;
					line-height: 28rpx;
					color: #969696;
					text-align: right;
				}
			}

			.price {
				display: flex;
				flex-direction: column;

				.pro-price {
					height: 48rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					line-height: 34rpx;

					.txt{
						font-size: 28rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-overflow: ellipsis;
						box-sizing: border-box;
						white-space: nowrap;
						overflow: hidden;
						font-style: normal;
						font-weight: bold;
					}
				}

				.del-price {
					display: flex;
					align-items: center;
					height: 28rpx;
					line-height: 28rpx;

					.del-icon {
						display: inline-block;
						font-size: 20rpx;
						height: 28rpx;
						line-height: 28rpx;
					}

					.del-num {
						display: inline-block;
						font-size: 20rpx;
						height: 28rpx;
						line-height: 28rpx;
						text-decoration: line-through;
					}
				}
			}
		}

		&.scroll {
			flex-direction: row !important;
			flex-wrap: nowrap;

			.good-box {
				padding-left: 16rpx;

				.good-box-item {
					position: relative;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.good-vimage-box {
						height: 312rpx;
						overflow: hidden;

						.good-vimage {
							min-height: 100%;
						}
					}
				}

				.box-bottom {
					padding: 0 16rpx 16rpx;
					justify-content: space-between;
				}
			}

			&.one {
				flex-direction: column;

				.good-box {
					width: 592rpx;

					.good-vimage-box {
						overflow: hidden;
						width: 100%;
						height: 276rpx;
					}
				}
			}

			&.two {
				.good-box-item {
					width: 312rpx;
				}
			}

			&.three {
				.del-price,
				.sales-num {
					display: none !important;
				}

				.good-box-item {
					width: 204rpx;

					.good-vimage-box {
						width: 100%;
						height: 204rpx;
						margin-bottom: 16rpx;
					}
				}
			}
		}

		&.block {
			&.one .good-box {
				width: 100%;

				.good-box-item {
					padding-bottom: 16rpx;

					.good-vimage-box {
						height: 322rpx;
					}
				}
			}

			&.one .good-box:nth-child(n + 2) {
				margin-top: 16rpx;
			}

			&.two .good-box {
				width: 50%;

				.good-box-item {
					position: relative;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.good-vimage-box {
						height: 344rpx;
					}
				}
			}

			&.two .good-box:nth-child(odd) {
				padding-right: 8rpx;
			}

			&.two .good-box:nth-child(even) {
				padding-left: 4rpx;
			}

			&.two .good-box:nth-child(n + 3) {
				margin: 16rpx 0 0;
			}

			&.three {
				.good-box {
					width: 33.33%;

					.del-price,
					.sales-num {
						display: none;
					}

					.good-vimage-box {
						height: 224rpx;
						margin-bottom: 16rpx;
					}
				}

				.good-box:nth-child(n + 4) {
					margin: 16rpx 0 0;
				}

				.good-box:nth-child(3n-1),
				.good-box:nth-child(3n) {
					padding-left: 8rpx;
				}

				.good-box:nth-child(3n-2),
				.good-box:nth-child(3n-1) {
					padding-right: 8rpx;
				}
			}

			.box-bottom {
				padding: 0 16rpx 16rpx;
				justify-content: space-between;
			}
		}

		&.list .good-box {
			border-radius: 0;
			width: 100%;
			margin: 0 auto;
			flex-direction: row;
			padding: 8rpx 24rpx 0;

			.right {
				height: 280rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-bottom: 16rpx;
				box-sizing: content-box;
				overflow: hidden;

				.title {
					margin-top: 0;
					padding: 0;
				}

				.subtitle {
					font-family: PingFang SC;
					font-style: normal;
					font-weight: normal;
					font-size: 24rpx;
					line-height: 34rpx;
					color: #969696;
					padding: 0;
					margin-bottom: 22rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 100%;
					box-sizing: border-box;
				}

				.right-bottom {
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					margin-bottom: 0;

					.price {
						display: flex;
						flex-direction: column;

						.pro-price {
							height: 48rpx;
						}
					}
				}
			}

			.good-box-item {
				display: flex;
			}

			.vimage-box {
				width: 281rpx;
				height: 281rpx;
				-ms-flex-negative: 0;
				flex-shrink: 0;
				margin-right: 16rpx;

				.good-vimage-box {
					height: 100%;
					display: block;

					.good-vimage {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
</style>
